<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        select {
            width: 200px;
            height: 300px;
            font-size: 22px;
            background-color: #80ff45;
        }

        /* button:nth-child() */
    </style>
    <script src="./jquery-1.11.1.js"></script>
</head>

<body>

    <select name="" id="sel1" size="4" multiple>
        <option value="">香蕉</option>
        <option value="">大鸭梨</option>
        <option value="">苹果</option>
        <option value="">大西瓜</option>
    </select>

    <button>&gt;&gt;&gt;</button>
    <button>&lt;&lt;&lt;</button>
    <button>&gt;</button>
    <button>&lt;1</button>

    <select name="" id="sel2" size="4" multiple>


    </select>

    <script>
        $(function () {
            $('button:nth-child(2)').click(function () {
                // 判断如果#sel1 里没有option的话就不可以执行里面的代码,避免删除所有的option
                if ($('#sel1 option').length > 1) {
                    var c = $(this).siblings('#sel1').html();
                    $(this).siblings('#sel1').children().remove();
                    $(this).siblings('#sel2').html(c);
                }
            })
            $('button:nth-child(3)').click(function () {
                // 判断如果#sel2 里没有option的话就不可以执行里面的代码,避免删除所有的option
                if ($('#sel2 option').length > 1) {
                    var c = $(this).siblings('#sel2').html();
                    $(this).siblings('#sel2').children().remove();
                    $(this).siblings('#sel1').html(c);
                }
            })
            // 使用append来进行转移
            $('button').eq(2).click(function () {
                $('#sel2').append($('#sel1 option:selected'))
            })
            $('button').eq(3).click(function () {
                $('#sel1').append($('#sel2 option:selected'));
            })
        })
    </script>


</body>

</html>